<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

import headerUtil from "./base/common/headerUtil.vue";
import reqApis from '../req/reqApis.js';
import Client from '../req/common.js';


const currentData = ref<any>({
  user: {},
  headerObj:{
    showType: 2
  },
  params: {
    userId: null,
    nickName: null,
    trueName: null,
    phone: null,
    userAddress: null
  }
});

const getUserFn = () => {
      reqApis.getCurrentUserApi({}).then((res: any) => {
        currentData.value.user = res.data;
      })
    };
const updateFn = (index:Number, value: any) => {
  let param = null;
  let id = currentData.value.user.userId;
  if(index==0){
    param = {userId: id,nickName: value};
  }else if(index==1) {
    param = {userId: id,trueName: value};
  }else if(index==2) {
    param = {userId: id,phone: value};
  }else if(index==3){
    param = {userId: id,address: value};
  }
  reqApis.updateUserApi(param).then((res: any) => {
  }).catch(err => {

  });
}
const toFriends = () => {
  router.push("/message");
}

const lougout = () => {
  Client.removeStore("feiyuToken");
  router.push("/login")
};

const toAddress = () => {
  router.push("/addressList")
}

getUserFn();
</script>

<template>
  <section class="manage">
    <headerUtil :obj="currentData.headerObj">账号管理</headerUtil>
    <div class="content">
      <div class="item title">当前登录账号</div>
      <div class="user">
        <div class="face" :style="{background: `url(${currentData.user.avatar}) no-repeat center`}"></div>
        <div class="info">
          <div class="name">{{currentData.user.nickName}}</div>
          <div class="userid">{{currentData.user.userId}}</div>
        </div>
      </div>
      <div class="item"><label>用户名称:</label><input @blur="updateFn(0, currentData.user.nickName)" v-model="currentData.user.nickName" placeholder="请输入真名" /></div>
      <div class="item"><label>用户真名:</label><input @blur="updateFn(1, currentData.user.trueName)" v-model="currentData.user.trueName" placeholder="请输入昵称" /></div>
      <div class="item"><label>手机号码:</label><input @blur="updateFn(2, currentData.user.phone)" v-model="currentData.user.phone" placeholder="请输入手机号码" /></div>
      <div class="item" @click="toAddress()"><label>收货管理:</label>{{currentData.user.address}}</div>
      <div class="logout"><van-button @click="toFriends()" type="primary" block>消息通讯</van-button></div>
      <div class="logout"><van-button @click="lougout" type="danger" block>退出登录</van-button></div>
    </div>
    

  </section>
</template>

<style lang="less" scoped>
.manage {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    background: white;
    .user {
      padding: .12rem .1rem;
      display: flex;
      align-items: center;
      position: relative;
      &::after {
        width: 3.65rem;
        height: 0;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        border-bottom: .01rem solid #e5e5e5;
      }
      .face {
        width: .5rem;
        height: .5rem;
        margin-right: .1rem;
        background-size: cover!important;
        border-radius: 50%;
      }
      .info {
        color: #999;
        font-size: .14rem;
        .name {
          margin-bottom: .1rem;
          color: #666;
        }
      }
      
    }
    .logout {
      height: .44rem;
      padding: .3rem .1rem;
    }
    .item {
      height: .44rem;
      padding: 0 .1rem;
      display: flex;
      align-items: center;
      font-size: .14rem;
      color: #999;
      position: relative;
      label {
        color: #222;
        padding-right: .1rem;
      }
      input {
        flex: 1;
      }
      &.title {
        color: #666;
        &::before {
           border: none;
        }
      }
      // &::before {
      //   width: .1rem;
      //   height: .1rem;
      //   content: "";
      //   border-top: .01rem solid #666;
      //   border-left: .01rem solid #666;
      //   transform-origin: 50%;
      //   position: absolute;
      //   top: 50%;
      //   margin-top: -.06rem;
      //   right: .2rem;
      //   transform: rotate(135deg);
      // }
      &::after {
        width: 3.65rem;
        height: 0;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        border-bottom: .01rem solid #e5e5e5;

      }
    }
  }
}
</style>
